<template>
	<div class="file-list-container">
		<div class="record-file">
			<FileComponents :title="'录像文件'" :isDisable="filedata.length === 0" :filedata="filedata" :recordingConfig="recordingConfig" :options="options" fileType="video" class="video-box" />
		</div>
		<div class="agent-recorg">
			<FileComponents fileType="agent-recorg" :recordingConfig="recordingConfig" :filedata="filedata" :options="options" class="video-box" />
		</div>
		<div class="regional-screen">
			<FileComponents fileType="regional-screen" :recordingConfig="recordingConfig" :filedata="filedata" :options="options" class="video-box" />
		</div>
		<div class="session-file">
			<FileComponents :title="'通话随传资料'" fileType="picture" :imagesData="imagesData" :isDisable="downloadSessionUserImagesBtnDisabled" />
		</div>
		<div class="message-file">
			<FileComponents
				:title="'聊天文件'"
				fileType="message"
				:isDisable="messageData.list.length === 0 || selectFileList.length === 0"
				:messageData="messageData"
				:messagePages="messagePages"
				@changePageSize="changePageSize"
				@changeCurrentPage="changeCurrentPage"
				@searchClick="searchClickMessage"
				@handleSelectionChange="selectionMeassageFile"
			/>
		</div>
		<div class="business-file">
			<FileComponents
				:title="'业务操作文件'"
				fileType="business"
				:businessData="businessData"
				:isDisable="businessData.list.length === 0 || selectBusinessFileList.length === 0"
				:businessPages="businessPages"
				@changeBusinessPageSize="changeBusinessPageSize"
				@changeBusinessCurrentPage="changeBusinessCurrentPage"
				@searchClick="searchClickBusiness"
				@handleSelectionChange="selectionBusinessFile"
			/>
		</div>
	</div>
</template>

<script>
import FileComponents from './FileComponent/FileComponents.vue';
import { getUserMessage, getSessionFileList, getRecordingVideos, getSelectSessionFileListByName } from '../../api/api';
import { getFileSize, appendToken } from '../../utils/tool';
export default {
	components: {
		FileComponents
	},
	props: {
		sessionId: {
			type: String,
			require: true,
			default: () => ''
		}
	},
	data() {
		return {
			// 通话随传资料数据
			imagesData: [
				{
					id: 1,
					src: '',
					desc: '身份证人像面'
				},
				{
					id: 2,
					src: '',
					desc: '身份证国徽面'
				},
				{
					id: 3,
					src: '',
					desc: '自拍照'
				},
				{
					id: 4,
					src: '',
					desc: '银行卡'
				}
			],
			// 聊天文件数据
			messageData: {
				total: '',
				list: []
			},
			// 业务操作文件数据
			businessData: {
				total: '',
				list: []
			},
			messagePages: {
				page: 1,
				pageSize: 10,
				total: ''
			},
			businessPages: {
				page: 1,
				pageSize: 10,
				total: ''
			},
			filedata: [], //录像文件数据
			options: [], //视频打点
			searchMessage: '',
			searchBusiness: '',
			selectFileList: [],
			selectBusinessFileList: [],
			recordingConfig: {} //录像文件存储类型
		};
	},
	async mounted() {
		await this.initChatFile().then().catch();
		await this.initBusinessFile().then().catch();
		await this.initFileVideos().then().catch();
		await this.initImagesList().then().catch();
	},
	computed: {
		// 判断会话中提交的个人信息的图片集合是否可下载
		downloadSessionUserImagesBtnDisabled() {
			let flag = true;
			for (let i = 0; i < this.imagesData.length; i++) {
				if (this.imagesData[i].src) {
					flag = false;
					break;
				}
			}
			return flag;
		}
	},
	methods: {
		// 初始化通话随传资料照片
		initImagesList() {
			return new Promise((reolve, reject) => {
				getUserMessage(this.sessionId)
					.then(res => {
						// console.log(res.data, '获取通话随传资料照片');
						let data = res.data;
						let result = [];
						let obj = {};
						obj.src = appendToken(data.frontPhoto);
						obj.desc = '身份证人像面';
						let obj2 = {};
						obj2.src = appendToken(data.backPhoto);
						obj2.desc = '身份证国徽面';
						let obj3 = {};
						obj3.src = appendToken(data.selfie);
						obj3.desc = '自拍照';
						let obj4 = {};
						obj4.src = appendToken(data.bankCardPhoto);
						obj4.desc = '银行卡';
						result.push(obj, obj2, obj3, obj4);
						this.imagesData = result;
						reolve(this.imagesData);
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		// 初始化聊天文件
		initChatFile() {
			return new Promise((resolve, reject) => {
				let data = {
					sessionId: this.sessionId,
					type: 'im',
					page: this.messagePages.page,
					pageSize: this.messagePages.pageSize
				};
				getSessionFileList(data)
					.then(res => {
						// console.log(res.data, '聊天文件');
						this.messageData.total = res.data.total;
						this.messagePages.total = res.data.total;
						this.messageData.list = res.data.list.map(item => {
							return {
								fileName: item.fileName,
								sendAt: this.$moment(item.sendAt).format('YYYY-MM-DD HH:mm:ss'),
								size: getFileSize(item.size),
								type: item.type,
								url: appendToken(item.url)
							};
						});
						resolve(this.messageData);
					})
					.catch(err => {
						reject(err);
						console.log(err);
						this.$requestApiError(err, () => {
							this.$router.push('/');
						});
					});
			});
		},
		// 初始化业务操作文件
		initBusinessFile() {
			return new Promise((resolve, reject) => {
				let data = {
					sessionId: this.sessionId,
					type: 'operations',
					page: this.businessPages.page,
					pageSize: this.businessPages.pageSize
				};
				getSessionFileList(data)
					.then(res => {
						// console.log(res, '业务操作文件');
						this.businessData.total = res.data.total;
						this.businessPages.total = res.data.total;
						const uniqueList = res.data.list.reduce((unique, item) => {
							const fileName = item.fileName;
							// 检查unique数组中是否已经有相同fileName的对象
							// if (!unique.some(u => u.fileName === fileName)) {
							// 	// 如果没有，创建新对象并添加到unique数组
							// 	unique.push({
							// 		fileName: fileName,
							// 		sendAt: this.$moment(item.sendAt).format('YYYY-MM-DD HH:mm:ss'),
							// 		size: getFileSize(item.size),
							// 		type: item.type,
							// 		url: item.url
							// 	});
							// }
							unique.push({
								fileName: fileName,
								sendAt: this.$moment(item.sendAt).format('YYYY-MM-DD HH:mm:ss'),
								size: getFileSize(item.size),
								type: item.type,
								url: appendToken(item.url)
							});
							return unique;
						}, []);
						this.businessData.list = uniqueList;
						resolve(this.businessData);
					})
					.catch(err => {
						reject(err);
						console.log(err);
					});
			});
		},
		// 聊天文件分页
		changePageSize(val) {
			this.messagePages.pageSize = val;
			this.messagePages.page = 1;
			this.initChatFile();
		},
		changeCurrentPage(val) {
			this.messagePages.page = val;
			this.initChatFile();
		},
		// 业务操作文件的分页
		changeBusinessPageSize(val) {
			this.businessPages.pageSize = val;
			this.businessPages.page = 1;
			this.initBusinessFile();
		},
		changeBusinessCurrentPage(val) {
			this.businessPages.page = val;
			this.initBusinessFile();
		},
		initFileVideos() {
			return new Promise((resolve, reject) => {
				getRecordingVideos(this.sessionId)
					.then(res => {
						// console.log(res.data, '录像文件');
						res.data.map(item => {
							if (item && item.url && item.url.startsWith('http://')) {
								item.url = item.url.replace(/http/, 'https');
								console.log(item.url);
								this.filedata.push(item);
							} else {
								this.filedata.push(item);
							}
							this.recordingConfig = item.recordingConfig;
						});
						console.log(this.recordingConfig);
						this.setVideoOptions(this.filedata);
						resolve(this.filedata);
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		// 设置可打点的视频组件的属性
		setVideoOptions(filedata) {
			console.log('filedata : ', filedata);
			// eslint-disable-next-line no-unused-expressions
			filedata &&
				filedata.map((item, index) => {
					console.log('filedataItem:', item);
					let option = {};
					option.id = `video_${index}`;
					option.url = item.url ? appendToken(item.url) : '';
					// 确定一下返回的数据结构
					option.markers = item.timePoint.map(point => {
						// 洗Ai 录屏数据
						if (!point.content && !point.userName) {
							return [];
						}
						return {
							time: point.timePoint ? point.timePoint : '',
							text: point.content ? point.content.replace(/\n/gi, ' ') : '',
							userName: point.userName ? point.userName : ''
						};
					});
					option.userId = item.userId;
					option.userName = item.userName || '';
					option.type = item.type;
					this.options.push(option);
				});
			console.log('this.options : ', this.options);
		},
		// 聊天文件搜索
		searchClickMessage(searchKeyWord) {
			this.searchMessage = searchKeyWord;
			return new Promise((resolve, reject) => {
				let data = {
					sessionId: this.sessionId,
					type: 'im',
					page: this.messagePages.page,
					pageSize: this.messagePages.pageSize,
					query: this.searchMessage
				};
				getSelectSessionFileListByName(data)
					.then(res => {
						console.log(res.data, '聊天文件搜索');
						this.messageData.total = res.data.total;
						this.messagePages.total = res.data.total;
						this.messageData.list = res.data.list.map(item => {
							return {
								fileName: item.fileName,
								sendAt: this.$moment(item.sendAt).format('YYYY-MM-DD HH:mm:ss'),
								size: getFileSize(item.size),
								type: item.type,
								url: appendToken(item.url)
							};
						});
						resolve(this.messageData);
					})
					.catch(err => {
						reject(err);
						console.log(err);
					});
			});
		},
		// 业务操作文件搜索
		searchClickBusiness(searchKeyWord) {
			this.searchBusiness = searchKeyWord;
			console.log(this.searchBusiness);
			return new Promise((resolve, reject) => {
				let data = {
					sessionId: this.sessionId,
					type: 'operations',
					page: this.businessPages.page,
					pageSize: this.businessPages.pageSize,
					query: this.searchBusiness
				};
				getSelectSessionFileListByName(data)
					.then(res => {
						this.businessData.total = res.data.total;
						this.businessPages.total = res.data.total;
						const uniqueList = res.data.list.reduce((unique, item) => {
							const fileName = item.fileName;
							// 检查unique数组中是否已经有相同fileName的对象
							// if (!unique.some(u => u.fileName === fileName)) {
							// 	// 如果没有，创建新对象并添加到unique数组
							// 	unique.push({
							// 		fileName: fileName,
							// 		sendAt: this.$moment(item.sendAt).format('YYYY-MM-DD HH:mm:ss'),
							// 		size: getFileSize(item.size),
							// 		type: item.type,
							// 		url: item.url
							// 	});
							// }
							unique.push({
								fileName: fileName,
								sendAt: this.$moment(item.sendAt).format('YYYY-MM-DD HH:mm:ss'),
								size: getFileSize(item.size),
								type: item.type,
								url: appendToken(item.url)
							});
							return unique;
						}, []);
						this.businessData.list = uniqueList;
						resolve(this.businessData);
					})
					.catch(err => {
						reject(err);
						console.log(err);
					});
			});
		},
		selectionMeassageFile(data) {
			this.selectFileList = data;
		},
		selectionBusinessFile(data) {
			this.selectBusinessFileList = data;
		}
	}
};
</script>

<style lang="less" scoped>
.file-list-container {
	.session-file {
		padding-bottom: 20px;
	}
	.page-size {
		padding: 5px 0 0 10px;
	}
}
</style>
